<!DOCTYPE html >
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<base href="" />
		<link href="favicon.ico" rel="shortcut icon" />
		<title>Google Maps jQuery Plugin</title>
		<meta name="robots" content="index,follow">
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		
        <!-- The Needs -->
			
		<!-- ! The Plugin Stylesheet, needed -->
		<link rel="stylesheet" type="text/css" href="./css/jquery.googlemaps.css" title="style" />
		
		<!-- ! Google Maps API v3, needed -->
		<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
		
		<!-- ! Addition Infobox Script from Google, use THIS modificated Version, needed -->
		<script type="text/javascript" src="./js/infobox.js"></script>
		
		<!-- ! jQuery latest, here: 1.9.1., needed -->
		<script type="text/javascript" src="./js/jquery.min.js"></script>
		
		<!-- ! The Plugin Script Base, needed -->
		<script type="text/javascript" src="./js/jquery.googlemaps.js"></script>
		
		<!-- ! Example Map Data, replace it, but: needed anyway -->
		<script type="text/javascript" src="./mapdata.js"></script>
		
		<!-- End Needs -->
		
		<!-- Example Page Java Script, not needed -->
		<script type="text/javascript" src="./js/assets/page.js"></script>
        
		<!-- Additional Stylesheets, not needed -->
        <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Open+Sans:400,800,300" title="style" />
        <link rel="stylesheet" type="text/css" href="./css/assets/bootstrap.min.css" title="style" />
        <link rel="stylesheet" type="text/css" href="./css/assets/font-awesome.min.css" title="style" />
        <!-- end Additional Stylesheets -->
        
        <!-- ! Example CSS Stuff, not needed -->
        <link rel="stylesheet" type="text/css" href="./css/assets/page.css" title="style" />
        
	</head>
	<body>
		<div class="page">
		    <div class="left">
		        <div class="heading">
                    <h1>Google Maps</h1>
                    <h2>jQuery Plugin</h2>
                </div>
        		<div id="mapbox" class="mapbox">
        			
        		</div>
    		</div>
    		<div class="right">
    		   <div class="heading">
                    <div class="btn-group">
                        <button type="button" class="btn btn-default btn-xs btn-disabled" disabled="disabled">Show Seed: </button>
                        <button type="button" class="btn btn-primary btn-xs buttonShowOptions fat">Merged Options</button>
                        <button type="button" class="btn btn-primary btn-xs buttonShowParams fat">Init Parameters</button>
                        <button type="button" class="btn btn-primary btn-xs buttonShowDefaultOptions fat">Plugin Defaults</button>
                    </div>
                </div>
        	   <textarea class="" id="options" wrap="off">
        	        
        	   </textarea>
        	   <div class="code-controls">
            	   
            	   <div class="btn-group fltr">
            	       <button type="button" class="btn btn-default btn-xs btn-disabled" disabled="disabled">Actions: </button>
            	       <button type="button" class="btn btn-primary btn-xs buttonInit">init()</button>
                       <button type="button" class="btn btn-primary btn-xs buttonShowAllInfoBoxes">showAllInfoBoxes()</button>
                       <button type="button" class="btn btn-primary btn-xs buttonHideAllInfoBoxes">hideAllInfoBoxes()</button>
                       <button type="button" class="btn btn-primary btn-xs buttonDestroy">destroy()</button>
                   </div>
                   <button type="button" class="btn btn-success btn buttonInit fat">Init with this options</button>
        	   </div>
    	    </div>
	    </div>
	</body>
	<script>
	
		var mapbox;
		
		$(window).on('ready',function(){
			
			mapbox = $('#mapbox').googleMapsTools ( {
				data     	: map,
				infoBox  	: {
				     openOn              : 'click',
				     closeOnClickOutside : true
				}
			} );
			
			
			$('.buttonInit').on('click.'+mapbox._ns,function(){
	           mapbox.destroy();
	           mapbox = $('#mapbox').googleMapsTools ( {
	                data : map,
	           } );
	        });
	        
			$('.buttonHideAllInfoBoxes').on('click.'+mapbox._ns,function(){
	           mapbox.hideAllInfoBoxes();
	        });
	        
	        $('.buttonShowAllInfoBoxes').on('click.'+mapbox._ns,function(){
	            mapbox.showAllInfoBoxes();
	        });
	        
	        $('.buttonDestroy').on('click.'+mapbox._ns,function(){
	           mapbox.destroy('sdfgsdfG');
	        });
	        
	        
	        
	        $('.buttonShowOptions').on('click',function(){
	            $('#options').html($('<div/>').text(JSON.stringify(mapbox.getOptions(),null,4)).html().replace(/\\"/gi,'"'));
	            $('.btn-group .btn-info').removeClass('btn-info').addClass('btn-primary');
	            $(this).removeClass('btn-primary').addClass('btn-info');
	        });
	        
	        $('.buttonShowDefaultOptions').on('click',function(){
                $('#options').html($('<div/>').text(JSON.stringify(mapbox.getDefaults(),null,4)).html().replace(/\\"/gi,'"'));
                $('.btn-group .btn-info').removeClass('btn-info').addClass('btn-primary');
                $(this).removeClass('btn-primary').addClass('btn-info');
            });
            
            $('.buttonShowParams').on('click',function(){
                $('#options').html($('<div/>').text(JSON.stringify(mapbox.getParams(),null,4)).html().replace(/\\"/gi,'"'));
                $('.btn-group .btn-info').removeClass('btn-info').addClass('btn-primary');
                $(this).removeClass('btn-primary').addClass('btn-info');
            });
	        
	        $('.buttonShowOptions').trigger('click');
	        
		});
		
	</script>
</html>